<template>
<!-- 专辑组件页面 -->
  <scroll-view scroll-y @scrolltolower="handeltoLower" class="scroll">
    <!-- 轮播图 -->
    <view class="lunbotu">
      <swiper indicator-dots circular autoplay>
        <swiper-item v-for="item in bannerList" :key="item.id">
          <image :src="item.thumb" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图结束 -->
    <!-- 专辑 -->
    <navigator
      class="box"
      v-for="item in albumList"
      :key="item.id"
      :url="`/pages/album/index?id=${item.id}`"
    >
      <view class="left"> 
        <image class="left_img" :src="item.cover" mode="aspectFill"></image>
      </view>
      <view class="right">
        <view class="right_title">{{ item.name }}</view>
        <view class="tight_text">{{ item.desc }}</view>
        <view class="right_but">
          <view class="but_text">+ 关注 </view>
        </view>
      </view>
    </navigator>
    <!-- 专辑end -->
    <!--  -->
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0
      },
      /* 轮播图数据 */
      bannerList: [],
      /* 专辑数据 */
      albumList: [],
      /* 是否还有分页数据 */
      ifGetList: 1
    };
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "懂你找图"
    });
    this.getList();
  },
  methods: {
    async getList() {
      const res = await this.http({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.params
      });
      if (res.statusCode !== 200) {
        return;
      }
      if (this.bannerList.length === 0) {
        this.bannerList = res.data.res.banner;
      }
      if (res.data.res.album.length === 0) {
        this.ifGetList = 2;
        return;
      }
      //   console.log(this.ifGetList);
      //   console.log(res.data.res.album);
      console.log(this.albumList);

      this.albumList = [...this.albumList, ...res.data.res.album];
    },
    /* 页面滚动事件 */
    handeltoLower() {
      if (this.ifGetList === 1) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 40px);
}
view.lunbotu {
  swiper {
    width: 750rpx;
    height: calc(750rpx / 2.3);
    swiper-item {
      img {
        height: 100%;
      }
    }
  }
}
.box {
  margin-top: 10rpx;
  display: flex;
  .left {
    flex: 2;
    padding: 20rpx;
    .left_img {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    flex: 5;
    overflow: hidden;
    margin-left: 30rpx;
    .right_title {
      font-size: 28rpx;
      font-weight: 600;
      margin: 10rpx 0;
    }

    .tight_text {
      font-size: 24rpx;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .right_but {
      display: flex;
      justify-content: flex-end;

      .but_text {
        color: $color;
        margin-right: 20rpx;
        margin-top: 10rpx;
        border: 2rpx solid $color;
        padding: 10rpx;
      }
    }
  }
}
</style>